<template>
  <div class="el-radio">
    <div class="el-radio_input" @click="_onchange">
      <div class="el-radio_inner" :class="{ 'is-checked': active }">
        <svg
          t="1659487878100"
          class="icon"
          viewBox="0 0 1028 1024"
          p-id="1249"
          width="10"
          height="10"
        >
          <path
            d="M363.2525 867.984c-12.08 0-23.903-4.627-33.156-13.623L13.6955 537.96c-18.25-18.25-18.25-47.807 0-66.056 18.25-18.25 47.807-18.25 66.056 0L362.9975 755.149 948.5075 169.896c18.25-18.25 47.807-18.25 66.056 0 18.25 18.249 18.25 47.807 0 66.056l-618.41 618.41c-8.995 8.995-21.075 13.622-32.9 13.622z"
            p-id="1250"
            fill="#fff"
          ></path>
        </svg>
      </div>
    </div>
    <div class="el-radio_config" v-if="active">
      <div class="layout-span row">
        <span class="label">行</span>
        <text-input v-model="row" @change="_inputrow" />
      </div>
      <div class="layout-span column">
        <span class="label">列</span>
        <text-input v-model="column" @change="_input" />
      </div>
    </div>
  </div>
</template>

<script>
import TextInput from "./text-number.vue";
export default {
  name: "layout-span",
  components: {
    TextInput,
  },
  props: {
    value: {
      type: Object,
      require: false,
      default() {
        return {
          status: false,
          row: 0,
          column: 0,
        };
      },
    },
    type: {
      type: String,
    },
    label: {
      type: String,
      require: false,
      default: null,
    },
  },
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      active: this.value.status,
      row: this.value.row,
      column: this.value.column,
    };
  },
  mounted() {
    if (this.value.status) {
      this.$emit("update", {
        status: this.active,
        row: this.row,
        column: this.column,
      });
    }
  },
  methods: {
    _inputrow(data) {
      this.row = parseInt(data.value);
      this.$emit("change", {
        key: this.type,
        value: {
          status: this.active,
          row: parseInt(data.value),
          column: this.column,
        },
      });
      this.updateWdithOrHeight();
    },
    _input(data) {
      this.column = parseInt(data.value);
      this.$emit("change", {
        key: this.type,
        value: {
          status: this.active,
          row: this.row,
          column: parseInt(data.value),
        },
      });
      this.updateWdithOrHeight();
    },
    updateWdithOrHeight() {
      if (this.active) {
        this.$emit("update", {
          status: this.active,
          row: this.row,
          column: this.column,
        });
      }
    },
    _onchange() {
      this.active = !this.active;
      this.$emit("change", {
        key: this.type,
        value: {
          status: this.active,
          row: this.row,
          column: this.column,
        },
      });
      this.updateWdithOrHeight();
      this.$emit("input", this.active);
    },
  },
};
</script>

<style scoped lang="scss">
.el-radio {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  user-select: none;

  .el-radio_config {
    padding: 6px 0;
    width: 100%;

    .layout-span {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 12px;
      height: 24px;
      margin-bottom: 6px;

      .label {
        margin: 0px 4px;
        text-align: right;
      }
    }
  }

  .el-radio_input {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;

    .el-radio_inner {
      position: relative;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      margin: 0px 4px;
      width: 14px;
      height: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      z-index: 1;
      transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
        background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
    }

    .is-checked {
      background-color: #409eff;
      border-color: #409eff;
    }

    .el-radio_original {
      opacity: 0;
      outline: none;
      position: absolute;
      margin: 0;
      width: 0;
      height: 0;
      z-index: -1;
    }
  }

  .el-radio_label {
    display: inline-block;
    font-size: 12px;
    transition: all 0.25s;
  }

  .activeText {
    color: #409eff;
  }
}
</style>
